<template>
	<view class="page_cont">
		<view class="check_input">
			<view class="title">学校名称</view>
			<input type="text" class="input" @input="input_school" :value="schoolName" placeholder="请输入学校名称" placeholder-style="color:rgba(121,133,148,0.5);" />
		</view>
		<view class="check_item" @click="check_pop(1)">
			<view class="title">入学时间</view>
			<view class="nat">{{ startTime }}</view>
			<image class="icon" src="/static/icon43.png"></image>
		</view>
		<view class="check_item" @click="check_pop(2)">
			<view class="title">毕业时间</view>
			<view class="nat">{{ endTime }}</view>
			<image class="icon" src="/static/icon43.png"></image>
		</view>
		<view class="check_input">
			<view class="title">专业名称</view>
			<input type="text" class="input" @input="input_speciality" :value="majorName" placeholder="请输入专业名称" placeholder-style="color:rgba(121,133,148,0.5);" />
		</view>
		<view class="check_item">
			<view class="title">专业类型</view>
			<view class="kong"></view>
			<view class="check_wrap">
				<view class="item" @click="check_speciality(1)">
					<image class="icon" :src="spec_type == 1 ? '/static/icon46.png' : '/static/icon45.png'"></image>
					<view class="text">师范</view>
				</view>
				<view class="item" @click="check_speciality(2)">
					<image class="icon" :src="spec_type == 2 ? '/static/icon46.png' : '/static/icon45.png'"></image>
					<view class="text">非师范</view>
				</view>
			</view>
		</view>
		<view class="check_item" @click="check_pop(3)">
			<view class="title">学历情况</view>
			<view class="nat">{{ educational }}</view>
			<image class="icon" src="/static/icon43.png"></image>
		</view>
		<view class="check_item">
			<view class="title">是否全日制</view>
			<view class="kong"></view>
			<view class="check_wrap">
				<view class="item" @click="check_full(1)">
					<image class="icon" :src="full_type == 1 ? '/static/icon46.png' : '/static/icon45.png'"></image>
					<view class="text">是</view>
				</view>
				<view class="item" @click="check_full(2)">
					<image class="icon" :src="full_type == 2 ? '/static/icon46.png' : '/static/icon45.png'"></image>
					<view class="text">否</view>
				</view>
			</view>
		</view>
		<view class="btn_wrap">
			<view class="del_btn" @click="show_pop = true" v-if="id > 0">删除</view>
			<view class="con_btn" @click="confirm_enducat()">保存</view>
		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-show="show_pop">
			<view class="pop">
				<view class="point">确定删除该教育经历</view>
				<view class="btn_wrap_confirm">
					<view class="btn" @click="show_pop = false">取消</view>
					<view class="btn" @click="confirm_del()">确定</view>
				</view>
			</view>
		</view>
		<pickerPop
			:showMask="show_mask"
			:showIndex="show_index"
			:title="title"
			:pickers="pickers"
			:value="value"
			:time="time"
			@closeMask="close_mask"
			@pickerChange="picker_change"
			@confirmValue="confirm_value"
		></pickerPop>
	</view>
</template>

<script>
import PickerPop from '../../components/pickerPop.vue';
import other from '../../utils/other.js';
import resume from '../../api/myResume.js';
import util from '../../utils/util.js';
export default {
	data() {
		return {
			id: '',
			spec_type: '',
			full_type: '',
			schoolName: '',
			majorName: '',
			show_mask: false,
			show_index: '',
			title: '',
			check_index: '',
			pickers: [],
			value: [0],
			time: false,
			startTime: '',
			start_value: [0, 0],
			endTime: '',
			end_value: [0, 0],
			educationals: [],
			educational: '',
			educational_value: [0],
			show_pop: false,
			switchOpen: true
		};
	},
	onLoad(options) {
		var that = this;
		that.id = options.id;
		this.getEducationList();
		if (options.id > 0) {
			resume.check_education_experience({ id: options.id }).then(res => {
				const { data } = res.data;
				console.log(data);
				this.schoolName = data.schoolName;
				this.startTime = this.format(data.admissionTime);
				this.endTime = this.format(data.graduationTime);
				this.spec_type = data.majorType;
				this.majorName = data.majorName;
				this.educational = data.educationName;
				this.full_type = data.isFullTime;
			});
		}
	},
	methods: {
		// 学校
		input_school(e) {
			this.schoolName = e.detail.value;
		},
		// 专业名称
		input_speciality(e) {
			this.majorName = e.detail.value;
		},
		// 专业类型
		check_speciality(index) {
			this.spec_type = index;
		},
		// 全日制
		check_full(index) {
			this.full_type = index;
		},
		// 选择框
		check_pop(index) {
			this.check_index = index;
			switch (index) {
				case 1:
					this.show_index = 4;
					this.time = true;
					this.title = '入学时间';
					this.value = this.start_value;
					this.show_mask = true;
					break;
				case 2:
					this.show_index = 4;
					this.time = true;
					this.title = '毕业时间';
					this.value = this.end_value;
					this.show_mask = true;
					break;
				case 3:
					this.show_index = 1;
					this.title = '学历情况';
					this.pickers = this.educationals;
					this.value = this.educational_value;
					this.show_mask = true;
					break;
			}
		},
		// 关闭选择框
		close_mask() {
			this.show_mask = false;
			this.time = false;
		},
		// 选择
		picker_change(res) {
			var val = res,
				index = this.check_index;
			switch (index) {
				case 1:
					if (val[1] != this.value[1]) {
						// this.times[2]=other.getMonthDay(this.times[0][val[0]],this.times[1][val[1]])
					}
					break;
				case 2:
					if (val[1] != this.value[1]) {
						// this.times[2]=other.getMonthDay(this.times[0][val[0]],this.times[1][val[1]])
					}
					break;
			}
			this.value = val;
		},
		// 确认
		confirm_value(data) {
			var index = this.check_index;
			switch (index) {
				case 1:
					this.start_value = this.value;
					this.startTime = data[0] + '-' + data[1];
					break;
				case 2:
					this.end_value = this.value;
					this.endTime = data[0] + '-' + data[1];
					break;
				case 3:
					this.educational_value = this.value;
					console.log(this.educational_value);
					this.educational = this.educationals[this.value[0]].name;
					console.log(this.educational);
					break;
			}
			this.close_mask();
		},
		// 保存
		confirm_enducat() {
			let valiteObj = [
				{
					value: this.schoolName,
					show_toast: '请输入学校名称'
				},
				{
					value: this.startTime,
					show_toast: '请选择入学时间'
				},
				{
					value: this.endTime,
					show_toast: '请选择毕业时间'
				},
				{
					value: this.majorName,
					show_toast: '请输入专业名称'
				},
				{
					value: this.spec_type,
					show_toast: '请选择专业类型'
				},
				{
					value: this.educational,
					show_toast: '请选择学历情况'
				},
				{
					value: this.full_type,
					show_toast: '请选择是否全日制'
				}
			];
			for (const key of valiteObj) {
				if (key.value === '') {
					util.page_show_toast(key.show_toast, 3000);
					return;
				}
			}
			let config = {
				schoolName: this.schoolName,
				admissionTime: new Date(this.startTime + '-' + '01').getTime(),
				graduationTime: new Date(this.endTime + '-' + '01').getTime(),
				majorName: this.majorName,
				majorType: this.spec_type,
				educationId: this.educational_value.join(),
				educationName: this.educational,
				isFullTime: this.full_type
			};
			if (config.graduationTime <= config.admissionTime) return util.page_show_toast('毕业时间不能小于入学时间', 3000);
			if (+this.id > 0) {
				config.id = this.id;
				if (this.switchOpen) {
					resume.edit_education_experience(config).then(res => {
						if (res.data.code === '200') {
							util.page_show_toast('修改成功', 3000);
							this.switchOpen = false;
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						}
					});
				}
			} else {
				if (this.switchOpen) {
					resume.add_education_experience(config).then(res => {
						if (res.data.code === '200') {
							util.page_show_toast('添加成功', 3000);
							this.switchOpen = false;
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						}
					});
				}
			}
		},
		// 学历列表
		getEducationList() {
			resume.get_education_list().then(res => {
				this.educationals = res.data.data;
			});
		},
		// 禁止触摸穿透
		moveHandle() {},
		// 确定删除
		confirm_del() {
			resume
				.del_education_experience_byId({
					id: this.id
				})
				.then(res => {
					this.show_pop = false;
					util.page_show_toast('删除成功', 3000);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
		},
		// 时间处理
		add0(m) {
			return m < 10 ? '0' + m : m;
		},
		format(shijianchuo) {
			var time = new Date(shijianchuo);
			var y = time.getFullYear();
			var m = time.getMonth() + 1;
			return y + '-' + this.add0(m);
		}
	},
	components: {
		pickerPop: PickerPop
	}
};
</script>

<style lang="scss">
.page_cont {
	padding: 0 32rpx;
	.check_input {
		padding: 32rpx 0;
		border-bottom: 2rpx solid #f7f9fb;
		.title {
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			color: #3f4a58;
			margin-bottom: 24rpx;
		}
		.input {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #798594;
		}
	}
	.check_item {
		padding: 32rpx 0;
		border-bottom: 2rpx solid #f7f9fb;
		display: flex;
		flex-direction: row;
		align-items: center;
		.title {
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			color: #3f4a58;
		}
		.nat {
			flex: 1;
			text-align: right;
			margin: 0 24rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #798594;
		}
		.icon {
			width: 24rpx;
			height: 24rpx;
		}
		.kong {
			flex: 1;
		}
		.check_wrap {
			display: flex;
			flex-direction: row;
			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				&:first-child {
					margin-right: 48rpx;
				}
				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
				.text {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #798594;
				}
			}
		}
	}
	.btn_wrap {
		position: fixed;
		bottom: 32rpx;
		left: 32rpx;
		width: 686rpx;
		display: flex;
		flex-direction: row;
		z-index: 222;
		.del_btn {
			width: 212rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #798594;
			background: rgba(146, 155, 167, 0.15);
			border-radius: 16rpx;
			margin-right: 26rpx;
		}
		.con_btn {
			flex: 1;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #fff;
			background: #5b90ff;
			border-radius: 16rpx;
		}
	}
	.mask {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.pop {
			width: 500rpx;
			/* #ifdef MP-WEIXIN */
			margin: 360rpx auto 0 auto;
			/* #endif */
			/* #ifdef H5 */
			margin: 500rpx auto 0 auto;
			/* #endif */
			/* #ifdef APP-PLUS */
			margin: 360rpx auto 0 auto;
			/* #endif */
			background: #fff;
			border-radius: 16rpx;
			padding: 76rpx 48rpx 52rpx 48rpx;

			.point {
				text-align: center;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3f4a58;
				margin-bottom: 64rpx;
			}

			.btn_wrap_confirm {
				width: 100%;
				display: flex;
				flex-direction: row;

				.btn {
					flex: 1;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 30rpx;
					font-weight: 400;
					border-radius: 16rpx;

					&:first-child {
						background: rgba(146, 155, 167, 0.15);
						color: #798594;
						margin-right: 38rpx;
					}

					&:last-child {
						background: #5b90ff;
						color: #fff;
					}
				}
			}
		}
	}
}
</style>
